<template>
  <div>
    welcome
    <el-cascader
      v-model="value"
      :options="options"
      size="medium"
      :props="optionsProps"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [],
      optionsProps: {
        expandTrigger: 'hover',
        value: 'subNumber',
        label: 'subName',
        children: 'children'
      }
    }
  },
  activated() {},
  watch: {},
  created() {
    this.getInfo()
  },
  mounted() {},
  methods: {
    async getInfo() {
      const { data: res } = await this.$http.get(
        'http://8.142.34.26:8015/expert/expertBaseMess/getSubject'
      )
      this.options = res.data
      this.getTreeData(this.options)
      // console.log(this.options)
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children)
        }
      }
      return data
    },
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped></style>
